﻿import { Link } from 'react-router-dom'
import { ArrowLongRightIcon, HeartIcon, SparklesIcon } from '@heroicons/react/24/outline'

const featureItems = [
  {
    title: '恋爱日记',
    description: '和 AI 一起回顾每天的甜蜜瞬间，自动生成情绪标签与图片建议。',
    icon: SparklesIcon,
  },
  {
    title: '纪念日提醒',
    description: '智能倒数每个值得庆祝的日子，自动同步到提醒与邮箱。',
    icon: HeartIcon,
  },
  {
    title: '生理期关怀',
    description: '基于历史记录预测下一周期，让关心更贴心。',
    icon: ArrowLongRightIcon,
  },
]

export const LandingPage = () => {
  if (typeof document !== 'undefined') document.title = 'Love Notes · 让关系更贴心'
  return (
    <div className="relative overflow-hidden">
      <BackgroundDecoration />
      <div className="mx-auto flex min-h-screen w-full max-w-6xl flex-col items-center px-4 pb-24 pt-20 sm:pt-24 lg:flex-row lg:justify-between lg:pt-28">
        <div className="max-w-xl text-center lg:text-left">
          <span className="inline-flex items-center gap-2 rounded-full bg-white/70 px-4 py-2 text-sm font-semibold text-blush-600 shadow-card">
            <SparklesIcon className="h-4 w-4" />
            情侣专属数字栖息地
          </span>
          <h1 className="mt-6 font-display text-4xl font-semibold leading-tight text-slate-900 sm:text-5xl">
            记录恋爱里
            <br className="hidden sm:block" />
            每一次怦然心动
          </h1>
          <p className="mt-6 text-base leading-relaxed text-slate-600 sm:text-lg">
            Love Notes 将恋爱日记、纪念日提醒、生理期关怀与 LangChain Agent 助手整合在一起，让陪伴更优雅、更贴心。
          </p>
          <div className="mt-10 flex flex-col gap-3 sm:flex-row sm:items-center">
            <Link
              to="/auth"
              className="inline-flex items-center justify-center rounded-full bg-blush-500 px-6 py-3 text-sm font-semibold text-white shadow-card transition hover:bg-blush-600"
            >
              立即开始记录
              <ArrowLongRightIcon className="ml-2 h-4 w-4" />
            </Link>
            <Link
              to="/assistant"
              className="inline-flex items-center justify-center rounded-full border border-white/80 px-6 py-3 text-sm font-semibold text-slate-600 backdrop-blur transition hover:bg-white/70"
            >
              前往 AI 助手
            </Link>
          </div>
        </div>
        <div className="mt-16 w-full max-w-lg lg:mt-0">
          <div className="glass-panel relative overflow-hidden rounded-3xl bg-gradient-to-br from-white/90 via-white/70 to-slate-100/40 p-6 sm:p-8">
            <div className="absolute -top-20 right-10 h-40 w-40 rounded-full bg-blush-200/70 blur-3xl" />
            <div className="absolute -bottom-24 left-0 h-44 w-44 rounded-full bg-sky-200/70 blur-3xl" />
            <div className="relative space-y-6">
              <header className="flex items-center justify-between">
                <div>
                  <p className="text-xs font-medium uppercase tracking-widest text-slate-400">
                    Love Notes 仪表盘
                  </p>
                  <h2 className="font-display text-2xl font-semibold text-slate-900">今天也爱你</h2>
                </div>
                <span className="rounded-full bg-blush-500/10 px-3 py-1 text-xs font-semibold text-blush-500">
                  同步更新
                </span>
              </header>
              <div className="grid gap-4 sm:grid-cols-2">
                <PreviewCard title="心情温度" value="晴朗 · 8.9/10" accent="from-blush-500/90 to-sky-500/90" />
                <PreviewCard title="下一次纪念日" value="11 天 · 牵手一周年" accent="from-sky-400/80 to-slate-500/80" />
                <PreviewCard title="AI 日记建议" value="今晚试试彼此的最爱料理吧！" accent="from-slate-900/70 to-slate-800/70" />
                <PreviewCard title="生理期预测" value="安全期 · 下一轮 11/02" accent="from-emerald-400/80 to-emerald-500/80" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <section className="mx-auto w-full max-w-6xl px-4 pb-24">
        <div className="glass-panel bg-white/80 p-8">
          <h2 className="font-display text-2xl font-semibold text-slate-900">情侣三大核心场景</h2>
          <p className="mt-2 text-sm text-slate-500">贴心模板 + LangChain 驱动的 AI 助手，让记录和沟通变得更轻松。</p>
          <div className="mt-8 grid gap-6 sm:grid-cols-3">
            {featureItems.map((feature) => (
              <div
                key={feature.title}
                className="rounded-3xl border border-white/60 bg-white/80 p-6 shadow-card transition hover:-translate-y-1 hover:shadow-lg"
              >
                <feature.icon className="h-9 w-9 text-blush-500" />
                <h3 className="mt-4 text-lg font-semibold text-slate-900">{feature.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-slate-500">{feature.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  )
}

const PreviewCard = ({
  title,
  value,
  accent,
}: {
  title: string
  value: string
  accent: string
}) => (
  <div className={`relative overflow-hidden rounded-2xl bg-gradient-to-br ${accent} px-4 py-5 text-white shadow-card`}>
    <div className="text-xs uppercase tracking-wider text-white/70">{title}</div>
    <div className="mt-2 text-base font-semibold leading-snug">{value}</div>
  </div>
)

const BackgroundDecoration = () => (
  <div>
    <div className="pointer-events-none absolute -left-10 -top-20 h-72 w-72 rounded-full bg-blush-200/80 blur-3xl" />
    <div className="pointer-events-none absolute -right-20 top-40 h-96 w-96 rounded-full bg-sky-200/80 blur-3xl" />
    <div className="pointer-events-none absolute bottom-10 right-20 h-72 w-72 rounded-full bg-blush-100/60 blur-3xl" />
  </div>
)

export default LandingPage
